<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="UTF-8">
	<title>面板示例</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../../dist/plugin/datagrid-scrollview.js"></script>
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
	<script src="../mock-min.js" type="text/javascript"></script>
</head>
<body>
	<h2>数据网格-滚动加载</h2>
	<h3>说明:</h3>
	<span>当用户不希望使用翻页条时,且加载数据记录大量条数时，可以使用些插件</span>
	<pre class="prettyprint hide lang-html"><code>//引入hisui后再引入插件
&lt;script type="text/javascript" src="../../dist/plugin/datagrid-scrollview.js"&gt;&lt;/script&gt;</code></pre>
	<h3>本地数据。一次加载所有数据，拉动时渲染要显示的行数据</h3>
	<div class="demo-exp-code entry-content"> 
		<table id="dg" class="hisui-datagrid" title="病人列表" style="width:800px;height:300px" 
		data-options="url:null,idField:'no',fitColumns:true,headerCls:'panel-header-gray',iconCls:'icon-paper',view:scrollview,rownumbers:true,singleSelect:false,autoRowHeight:false,pageSize:50,pagination:true">   
			<thead>   
				<tr>
					<th data-options="field:'checkOrd',checkbox:'true',align:'center',width:30,auto:false">选择</th> 
					<th data-options="field:'no',width:20">编码</th>   
					<th data-options="field:'name',width:20">姓名</th>   
					<th data-options="field:'loc',width:20">科室</th>
					<th data-options="field:'diag',width:20">诊断</th>
					<th data-options="field:'code',width:20">代码</th>
					<th data-options="field:'stdate',width:20">日期</th>   
				</tr>   
			</thead>  
		</table>
		<pre class="prettyprint lang-html hide"><code>
&lt;table id="dg" class="hisui-datagrid" title="病人列表" style="width:800px;height:300px" &gt;
	&lt;!--url:null表示本地数据,view:scrollview表示使用滚动加载插件--&gt;
	data-options="url:null,idField:'no',view:scrollview,fitColumns:true,headerCls:'panel-header-gray',iconCls:'icon-paper',rownumbers:true,singleSelect:false,autoRowHeight:false,pageSize:50,pagination:true">   
	&lt;thead&gt;   
		&lt;tr&gt; 
			&lt;th data-options="field:'checkOrd',checkbox:'true',align:'center',width:30,auto:false"&gt;选择&lt;/th&gt;
			&lt;th data-options="field:'no',width:20">编码&lt;/th&gt;   
			&lt;th data-options="field:'name',width:20">姓名&lt;/th&gt;   
			&lt;th data-options="field:'loc',width:20">科室&lt;/th&gt;
			&lt;th data-options="field:'diag',width:20">诊断&lt;/th&gt;
			&lt;th data-options="field:'code',width:20">代码&lt;/th&gt;
			&lt;th data-options="field:'stdate',width:20">日期&lt;/th&gt;  
		&lt;/tr&gt;   
	&lt;/thead&gt;  
&lt;/table&gt;</code></pre>
		<pre class="prettyprint lang-js hide"><code>$(function(){
	$cm({
		ClassName:"web.Patient",
		QueryName:"LookUp",
		ResultSetType："array" //则rows为[{},{},...]
		page:1,    //可选项，页码，默认1
		rows:20000    //可选项，获取多少条数据，默认50
	},function(rows){
		$('#dg').datagrid('loadData', rows);
	});
});
</code></pre>
	</div>
	<script type="text/javascript">
		$(function(){
			
			var rows = [];
			for(var i=1; i<=8002; i++){
				var amount = Math.floor(Math.random()*1000);
				var price = Math.floor(Math.random()*1000);
				rows.push({
					no: 'NO '+i,
					name: '张 '+i,
					loc: '内'+i+'科',
					diag:'diag '+i,
					code: i,
					stdate: $.fn.datebox.defaults.formatter(new Date())
				});
			}
			/*$('#dg').datagrid({
				detailFormatter:function(rowIndex, rowData){
					return '<table><tr>' +
						'<td style="border:0;padding-right:10px">' +
						'<p>姓名: ' + rowData.name + '</p>' +
						'<p>科室: ' + rowData.loc + '</p>' +
						'</td>' +
						'<td style="border:0">' +
						'<p>日期: ' + rowData.stdate + '</p>' +
						'<p>序号: ' + rowData.no + '</p>' +
						'</td>' +
						'</tr></table>';
				}	
			})*/
			$("#dg").datagrid('loadData', rows);
		});
	</script>
	<h3>远程数据。拉动时一次加载一页数据，渲染要显示的行数据</h3>
	<div class="demo-exp-code entry-content"> <!--,view:scrollview-->
		<table id="dg1" title="病人列表" style="width:800px;height:300px" class="hisui-datagrid"
		data-options="url:'getpatdata.jsp',view:scrollview,fitColumns:true,headerCls:'panel-header-gray',iconCls:'icon-paper',rownumbers:true,singleSelect:true,autoRowHeight:false,pageSize:50,pagination:false">   
			<thead>   
				<tr>   
					<th data-options="field:'no',width:20">编码</th>   
					<th data-options="field:'name',width:20">姓名</th>   
					<th data-options="field:'loc',width:20">科室</th>
					<th data-options="field:'diag',width:20">诊断</th>
					<th data-options="field:'code',width:20">代码</th>
					<th data-options="field:'stdate',width:20">日期</th>   
				</tr>   
			</thead>  
		</table>
<pre class="prettyprint lang-html hide"><code>&lt;table id="dg1" title="病人列表" style="width:800px;height:300px" &gt;
	&lt;thead&gt;   
		&lt;tr&gt; 
			&lt;th data-options="field:'no',width:20">编码&lt;/th&gt;   
			&lt;th data-options="field:'name',width:20">姓名&lt;/th&gt;   
			&lt;th data-options="field:'loc',width:20">科室&lt;/th&gt;
			&lt;th data-options="field:'diag',width:20">诊断&lt;/th&gt;
			&lt;th data-options="field:'code',width:20">代码&lt;/th&gt;
			&lt;th data-options="field:'stdate',width:20">日期&lt;/th&gt;  
		&lt;/tr&gt;   
	&lt;/thead&gt;  
&lt;/table&gt;</code></pre>
<pre class="prettyprint lang-js hide"><code>$(function(){
	$('#dg1').datagrid({
		url:$URL,
		queryParams:{
			ClassName:"web.Patient",
			QueryName:"LookUp",
			name:""
		},
		view:scrollview,
		headerCls:'panel-header-gray',iconCls:'icon-paper',
		fitColumns:true,
		rownumbers:true,
		singleSelect:true,
		autoRowHeight:false,
		pageSize:50,
		pagination:false,
		detailFormatter:function(rowIndex, rowData){
			return '&lt;table>&lt;tr>' +
				'&lt;td style="border:0;padding-right:10px">' +
				'&lt;p>姓名: ' + rowData.name + '&lt;/p>' +
				'&lt;p>科室: ' + rowData.loc + '&lt;/p>' +
				'&lt;/td>' +
				'&lt;td style="border:0">' +
				'&lt;p>日期: ' + rowData.stdate + '&lt;/p>' +
				'&lt;p>序号: ' + rowData.no + '&lt;/p>' +
				'&lt;/td>' +
				'&lt;/tr>&lt;/table>';
		}	
	}).datagrid('loadData', rows);
});
</code></pre>
		</div>
		<script type="text/javascript">
			$('#dg1').datagrid({
				detailFormatter:function(rowIndex, rowData){
					return '<table><tr>' +
						'<td style="border:0;padding-right:10px">' +
						'<p>姓名: ' + rowData.name + '</p>' +
						'<p>科室: ' + rowData.loc + '</p>' +
						'</td>' +
						'<td style="border:0">' +
						'<p>就诊日期: ' + rowData.stdate + '</p>' +
						'<p>序号: ' + rowData.no + '</p>' +
						'</td>' +
						'</tr></table>';
				}	
			})
			Mock.setup({
				timeout: '100-300' //后台时间
			})
			Mock.mock('getpatdata.jsp',{
				'rows|50':[{  //重复50次
					'no|+1':1, //从1开始,每次加1
					'name':/[赵钱孙李吴郑王张周汪韩苏辛][志三亮会强子祥云四土秀士二章隆财明勇艳][志三亮会强子秀祥云四土士二艳书轩章财明勇]/,
					'loc':/内[一二三]科/,
					'diag':'diag '+'@no',
					'code':/[A-Z][A-Z][A-Z][1-9][1-9][1-9]/, //占位符
					'stdate':/(2016|2017|2018)-(1[0-2]|0[1-9])-(2[0-9]|1[0-9]|0[1-9])/
				}],"total":8000
			});
		</script>
	<table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>detailFormatter</td>
			<td>定义格式显示行数据函数。function(rowIndex, rowData){return html;}</td>
			<td>null</td>
			<td></td>
		</tr>
	</table>
	<prettyprint />	
</body>
</html>